<template>
    <div class="playlist-container">      
        <div class="playlist-table">
            <div class="table-header">
                <div class="col-number">#</div>
                <div class="col-song">歌曲</div>
                <div class="col-artist">歌手</div>
                <div class="col-album">专辑</div>
                <div class="col-duration">时长</div>
            </div>
            
            <div class="table-body">
                <div 
                    v-for="(song, index) in playlist" 
                    :key="song.id"
                    class="table-row"
                    :class="{ 'active': currentSongIndex === index, 'playing': currentSongIndex === index && isPlaying }"
                    @click="playSong(index)"
                    @dblclick="playSong(index)"
                >
                    <div class="col-number">
                        <span v-if="currentSongIndex === index && isPlaying" class="playing-icon">♪</span>
                        <span v-else>{{ index + 1 }}</span>
                    </div>
                    <div class="col-song">
                        <div class="song-info">
                            <img :src="song.cover" :alt="song.title" class="song-cover-small">
                            <div class="song-details">
                                <div class="song-title">{{ song.title }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-artist">{{ song.artist }}</div>
                    <div class="col-album">{{ song.album }}</div>
                    <div class="col-duration">
                        <span class="duration-text">{{ song.duration }}</span>
                        <span class="button-icon">
                            <button class="play-btn" @click="playSong(index)">
                                <svg v-if="!isPlaying || currentSongIndex !== index" width="24" height="24" viewBox="0 0 48 48" fill="currentColor">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M11.082 4.32l28 17.998a2 2 0 010 3.364l-28 17.997C9.75 44.535 8 43.58 8 41.997V6.003C8 4.42 9.75 3.465 11.082 4.32zM12 9.667v28.668L34.301 24 12 9.666z" fill="currentColor"/>
                                </svg>
                                <svg v-else width="24" height="24" viewBox="0 0 48 48" fill="currentColor">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M24 2c12.15 0 22 9.85 22 22s-9.85 22-22 22S2 36.15 2 24 11.85 2 24 2zm0 4C14.059 6 6 14.059 6 24s8.059 18 18 18 18-8.059 18-18S33.941 6 24 6zm-3 8a1 1 0 011 1v18a1 1 0 01-1 1h-2a1 1 0 01-1-1V15a1 1 0 011-1h2zm8 0a1 1 0 011 1v18a1 1 0 01-1 1h-2a1 1 0 01-1-1V15a1 1 0 011-1h2z" fill="currentColor"/>
                                </svg>
                            </button>
                            <button class="favorite-btn" @click="toggleFavorite">
                                <svg width="24" height="24" viewBox="0 0 16 16" fill="currentColor">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.938 2.629c-.523.371-.936.975-.936.975s-.451-.597-.936-.975A3.075 3.075 0 005.184 2c-2.123 0-3.85 1.933-3.85 4.317 0 1.42.617 2.414 1.112 3.212l.003.004c1.329 2.16 4.4 4.469 4.966 4.895l.086.065c.15.122.318.174.495.174a.825.825 0 00.496-.174c.01-.01.04-.03.084-.064.563-.425 3.637-2.741 4.975-4.896l.003-.004c.495-.798 1.113-1.793 1.113-3.212C14.665 3.942 12.937 2 10.822 2c-.717 0-1.343.226-1.884.629zm1.474 8.52a28.92 28.92 0 01-1.814 1.575c-.212.17-.41.325-.602.471-.193-.148-.427-.33-.6-.468A28.45 28.45 0 015.59 11.16c-.717-.68-1.31-1.333-1.738-1.928a6.648 6.648 0 01-.266-.397c-.127-.204-.18-.29-.245-.4-.464-.783-.673-1.382-.673-2.118 0-1.678 1.165-2.984 2.517-2.984 1.175 0 2.823 2.171 2.823 2.171s1.628-2.17 2.815-2.17c1.34 0 2.51 1.313 2.511 2.984 0 .735-.21 1.334-.673 2.116-.066.11-.118.197-.242.396-.085.138-.183.281-.291.43-.428.583-1.013 1.223-1.715 1.89z" fill="currentColor"/><mask id="svg_ecd1b105fd__a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="1" y="2" width="14" height="13"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.938 2.629c-.523.371-.936.975-.936.975s-.451-.597-.936-.975A3.075 3.075 0 005.184 2c-2.123 0-3.85 1.933-3.85 4.317 0 1.42.617 2.414 1.112 3.212l.003.004c1.329 2.16 4.4 4.469 4.966 4.895l.086.065c.15.122.318.174.495.174a.825.825 0 00.496-.174c.01-.01.04-.03.084-.064.563-.425 3.637-2.741 4.975-4.896l.003-.004c.495-.798 1.113-1.793 1.113-3.212C14.665 3.942 12.937 2 10.822 2c-.717 0-1.343.226-1.884.629zm1.474 8.52a28.92 28.92 0 01-1.814 1.575c-.212.17-.41.325-.602.471-.193-.148-.427-.33-.6-.468A28.45 28.45 0 015.59 11.16c-.717-.68-1.31-1.333-1.738-1.928a6.648 6.648 0 01-.266-.397c-.127-.204-.18-.29-.245-.4-.464-.783-.673-1.382-.673-2.118 0-1.678 1.165-2.984 2.517-2.984 1.175 0 2.823 2.171 2.823 2.171s1.628-2.17 2.815-2.17c1.34 0 2.51 1.313 2.511 2.984 0 .735-.21 1.334-.673 2.116-.066.11-.118.197-.242.396-.085.138-.183.281-.291.43-.428.583-1.013 1.223-1.715 1.89z" fill="currentColor"/>
                                    </mask>
                                </svg>
                                <svg width="24" height="24" viewBox="0 0 16 16" fill="currentColor">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.822 2c-1.174 0-2.106.607-2.82 1.604C7.282 2.607 6.36 2 5.184 2c-2.123 0-3.85 1.933-3.85 4.317 0 1.422.62 2.418 1.115 3.216 1.435 2.332 4.9 4.838 5.052 4.96.15.122.318.174.495.174a.825.825 0 00.496-.174c.151-.122 3.615-2.636 5.059-4.96.495-.798 1.116-1.794 1.116-3.216C14.665 3.942 12.937 2 10.822 2z" fill="currentColor"/>
                                </svg>
                            </button>
                            <button class="share-btn" @click="shareSong">
                                <svg width="24" height="24" viewBox="0 0 48 48" fill="currentColor">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M9 36a1 1 0 011 1v3h28v-3a1 1 0 011-1h2a1 1 0 011 1v5a2 2 0 01-2 2H8a2 2 0 01-2-2v-5a1 1 0 011-1h2zM32.613 3.31l.094.083 9.9 9.9a1 1 0 01.083 1.32l-.083.094-9.9 9.9a1 1 0 01-1.32.083l-.094-.083-1.414-1.415a1 1 0 01-.084-1.32l.084-.094 5.776-5.777-.497.003c-5.734.073-10.308 1.163-14.166 3.263-3.796 2.068-6.753 5.078-8.783 8.944a24.502 24.502 0 00-.905 1.92l-.112.277c-.1.253-.218.564-.351.933A1 1 0 019.9 32H7.777a1 1 0 01-.95-1.31l.106-.319a28.914 28.914 0 011.747-4.047c2.403-4.563 5.928-8.144 10.42-10.584 4.465-2.426 9.796-3.725 16.556-3.74l-5.778-5.778a1 1 0 01-.084-1.32l.084-.094 1.414-1.415a1 1 0 011.218-.152l.102.07z" fill="currentColor"/>
                                </svg>
                            </button>
                            <button class="download-btn" @click="downloadSong">
                                <svg width="24" height="24" viewBox="0 0 48 48" fill="currentColor">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M7 16a1 1 0 011 1v23h32V17a1 1 0 011-1h2a1 1 0 011 1v25a2 2 0 01-2 2H6a2 2 0 01-2-2V17a1 1 0 011-1h2zM23.01 4.905l1.893.008a1 1 0 01.996.995l.08 18.207 4.235-4.235a1 1 0 011.414 0l1.414 1.414a1 1 0 010 1.415l-7.778 7.778a2 2 0 01-2.828 0l-7.778-7.778a1 1 0 010-1.415l1.414-1.414a1 1 0 011.414 0l4.601 4.602-.082-18.573a1.002 1.002 0 011.004-1.004z" fill="currentColor"/>
                                </svg>
                            </button>
                            <button class="delete-btn" @click="deleteSong">
                                <svg width="24" height="24" viewBox="0 0 48 48" fill="currentColor">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M30 4a2 2 0 012 2l-.001 1.999L42.719 8c.445 0 .606.046.77.134.162.087.29.215.377.378.088.163.134.324.134.77v1.436c0 .446-.046.607-.134.77a.908.908 0 01-.378.378c-.163.088-.324.134-.77.134L40 11.999 40 42a2 2 0 01-2 2H10a2 2 0 01-2-2l-.001-30.001L5.282 12c-.446 0-.607-.046-.77-.134a.908.908 0 01-.378-.378c-.088-.162-.134-.324-.134-.77V9.282c0-.446.046-.607.134-.77a.909.909 0 01.378-.378c.163-.088.324-.134.77-.134l10.717-.001L16 6a2 2 0 012-2h12zm5.999 7.999h-24L12 40h24l-.001-28.001zM21 18a1 1 0 011 1v14a1 1 0 01-1 1h-2a1 1 0 01-1-1V19a1 1 0 011-1h2zm8 0a1 1 0 011 1v14a1 1 0 01-1 1h-2a1 1 0 01-1-1V19a1 1 0 011-1h2z" fill="currentColor"/>
                                </svg>
                            </button>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// Props
const props = defineProps({
    currentSongIndex: {
        type: Number,
        default: 0
    },
    isPlaying: {
        type: Boolean,
        default: false
    }
})

// Emits
const emit = defineEmits(['play-song'])

// 示例播放列表数据
const playlist = ref([
    {
        id: 1,
        title: '夜曲',
        artist: '周杰伦',
        album: '十一月的萧邦',
        duration: '3:42',
        cover: 'https://picsum.photos/50/50?random=1'
    },
    {
        id: 2,
        title: '青花瓷',
        artist: '周杰伦',
        album: '我很忙',
        duration: '3:58',
        cover: 'https://picsum.photos/50/50?random=2'
    },
    {
        id: 3,
        title: '稻香',
        artist: '周杰伦',
        album: '魔杰座',
        duration: '3:43',
        cover: 'https://picsum.photos/50/50?random=3'
    },
    {
        id: 4,
        title: '告白气球',
        artist: '周杰伦',
        album: '周杰伦的床边故事',
        duration: '3:34',
        cover: 'https://picsum.photos/50/50?random=4'
    },
    {
        id: 5,
        title: '七里香',
        artist: '周杰伦',
        album: '七里香',
        duration: '4:05',
        cover: 'https://picsum.photos/50/50?random=5'
    },
    {
        id: 6,
        title: '简单爱',
        artist: '周杰伦',
        album: '范特西',
        duration: '4:30',
        cover: 'https://picsum.photos/50/50?random=6'
    },
    {
        id: 7,
        title: '晴天',
        artist: '周杰伦',
        album: '叶惠美',
        duration: '4:29',
        cover: 'https://picsum.photos/50/50?random=7'
    },
    {
        id: 8,
        title: '彩虹',
        artist: '周杰伦',
        album: '我很忙',
        duration: '4:23',
        cover: 'https://picsum.photos/50/50?random=8'
    },
    {
        id: 9,
        title: '听妈妈的话',
        artist: '周杰伦',
        album: '依然范特西',
        duration: '4:22',
        cover: 'https://picsum.photos/50/50?random=9'
    },
    {
        id: 10,
        title: '蒲公英的约定',
        artist: '周杰伦',
        album: '我很忙',
        duration: '3:57',
        cover: 'https://picsum.photos/50/50?random=10'
    },
    {
        id: 11,
        title: '七里香',
        artist: '周杰伦',
        album: '七里香',
        duration: '4:05',
        cover: 'https://picsum.photos/50/50?random=11'
    },
    {
        id: 12,
        title: '告白气球',
        artist: '周杰伦',
        album: '周杰伦的床边故事',
        duration: '3:34',
        cover: 'https://picsum.photos/50/50?random=12'
    }
])

// 播放歌曲
const playSong = (index) => {
    emit('play-song', index)
}

// 下载歌曲
const downloadSong = () => {
    const link = document.createElement('a');
    link.href = currentSong.value.url || '#';
    link.download = currentSong.value.title || 'song';
    link.click();
};

// 分享歌曲
const shareSong = () => {
    if (navigator.share) {
        navigator.share({
            title: currentSong.value.title,
            text: `Check out this song: ${currentSong.value.title} by ${currentSong.value.artist}`,
            url: currentSong.value.url || '#'
        }).catch(error => console.error('Error sharing:', error));
    } else {
        alert('Web Share API not supported in your browser.');
    }
};
</script>

<style scoped>
.playlist-container {
    width: 900px;
    height: 460px;
    background: #1a1a1a;
    color: #ffffff;
    padding: 0px;
    box-sizing: border-box;
    overflow: hidden;
}


.playlist-table {
    width: 100%;
}

.table-header {
    display: grid;
    grid-template-columns: 50px 1fr 200px 200px 80px;
    gap: 10px;
    padding: 10px 15px;
    border-bottom: 1px solid #333;
    font-weight: 600;
    color: #999;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.table-body {
    height: 410px;
    overflow-y: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 和 Edge */
}

.table-body::-webkit-scrollbar {
    display: none; /* Chrome, Safari 和 Opera */
}

.table-row {
    display: grid;
    grid-template-columns: 50px 1fr 200px 200px 80px;
    gap: 15px;
    padding: 10px 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    align-items: center;
}

.table-row:hover {
    background: #000000;
}

.table-row.active {
    color: #ff0000;
}

.table-row.active .song-title,
.table-row.active .col-artist,
.table-row.active .col-album,
.table-row.active .col-duration {
    color: #ff0000;
}

.table-row.playing .col-number {
    color: #ff0000;
}

.col-number {
    text-align: center;
    font-size: 14px;
}

.playing-icon {
    animation: pulse 1.5s infinite;
    color: #ff0000;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.col-song {
    display: flex;
    align-items: center;
}

.song-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.song-cover-small {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    object-fit: cover;
}

.song-details {
    flex: 1;
}

.song-title {
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 2px;
}

.col-artist,
.col-album {
    color: #999;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-duration {
    color: #999;
    font-size: 14px;
    text-align: right;
    position: relative;
}

.duration-text {
    display: inline-block;
    transition: opacity 0.2s ease;
}

/* 隐藏图标 */
.button-icon {
    display: none;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

/* 隐藏时间 */
.table-row:hover .duration-text {
    display: none;
}

/* 显示图标 */
.table-row:hover .button-icon {
    display: flex;
}

/* 按钮样式 */
.play-btn,
.favorite-btn,
.share-btn,
.download-btn,
.delete-btn {
    background: none;
    border: none;
    color: #ffffff;
    cursor: pointer;
    padding: 2px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* active 状态下的按钮图标颜色 */
.table-row.active .button-icon .play-btn,
.table-row.active .button-icon .favorite-btn,
.table-row.active .button-icon .share-btn,
.table-row.active .button-icon .download-btn,
.table-row.active .button-icon .delete-btn {
    color: #ff0000;
}

/* 鼠标悬停效果 */
.song-title:hover,
.col-artist:hover,
.col-album:hover {
    color: #ff0000;
    transition: color 0.2s ease;
}


</style>